
import { useLocation, useRoutes } from 'react-router-dom'
import routers from '../Routers/RouteDB'
import { Suspense, useEffect, useRef } from 'react'
import Transition from '../module/Transitionhs'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import "animate.css";

const RouterExport = () => {
    const element = useRoutes(routers)
    const location = useLocation()
    return (
        <div>
            <Suspense fallback={<div>loading...</div>}>
                {/* <TransitionGroup>
                    <CSSTransition
                        key={location.pathname}
                        classNames={animate}
                    >
                        {children}
                    </CSSTransition>
                </TransitionGroup> */}
                {element}
            </Suspense>
        </div>
    )
}
const animatesSearch = {
    enter: "animate__animated",//进场前
    enterActive: "animate__backInDown", //进场后直到结束
    exit: "animate__animated",//结束前
    exitActive: "animate__backOutDown",//结束后
}
const animate = {
    enter: "animate__animated",
    enterActive: "animate__zoomIn",
    exit: "animate__animated",
    exitActive: "animate__zoomOut",
}
export default RouterExport